function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })
  canvas.setChart(chart)

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        const data = params[0]
        return `${data.name}<br/>
                血糖: ${data.value} mmol/L<br/>
                状态: ${data.value > 11 ? '偏高' : data.value < 3.9 ? '偏低' : '正常'}`
      }
    },
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: 100
    }, {
      type: 'slider',
      show: true,
      start: 0,
      end: 100
    }],
    grid: {
      top: 30,
      bottom: 80,
      left: 40,
      right: 20
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisLine: { lineStyle: { color: '#999' } }
    },
    yAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#eee' } },
      axisLine: { lineStyle: { color: '#999' } },
      axisLabel: {
        formatter: '{value} mmol/L'
      }
    },
    series: [{
      type: 'line',
      smooth: true,
      data: [],
      itemStyle: {
        color: '#1aad19',
        borderWidth: 2
      },
      emphasis: {
        itemStyle: {
          borderWidth: 4
        }
      },
      markArea: {
        silent: true,
        data: [[{
          yAxis: 3.9,
          itemStyle: { color: 'rgba(250, 173, 20, 0.05)' }
        }, {
          yAxis: 11
        }]]
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(26, 173, 25, 0.3)'
        }, {
          offset: 1,
          color: 'rgba(26, 173, 25, 0.1)'
        }])
      }
    }]
  }

  chart.setOption(option)
  return chart
}